<template>
	<view class="p-bot180" :style="{'--color':color}">
		<navBar :title="pageData.file_content?pageData.file_content:'动态'" ></navBar>
		
		<view class="rows p-re" v-if="pageData.fileImgArr">
			
		<swiper :indicator-dots="false" 
		        :autoplay="false" 
				:duration="250"
				:current="current"
				@change="swiperCurrent"
			    class="swiper" >
			<swiper-item v-for="(imgItem,imgIndex) in pageData.fileImgArr" :key="imgIndex">
				<view class="swItem" :style="{'backgroundImage':`url(${imgUrl+imgItem})`}"></view>
				<image webp :src="$imgUrls(imgItem)" mode="aspectFit" class="imga" 
						@click="$previewImgs(imgIndex,pageData.fileImgArr)">
				</image>
			</swiper-item>
		</swiper>
		
		   <view class="row j-centert dots" v-if="pageData && pageData.fileImgArr.length > 1">
			   <view class="dot" 
			         :class="{'dotactive':current == dotIndex}"
			         v-for="(dotItem,dotIndex) in pageData.fileImgArr" :key="dotIndex"
					 @click="current = dotIndex"></view>
		   </view>
		   
		</view>
		



		<view class="row user" :class="pageData.fileImgArr?'isImgArr':'m-top20'">
			<view class="row j-sb a-center">
				<view class="d-flex a-center">
					<image :src="$imgUrls(pageData.fqheadimg)" mode="aspectFill" class="userHead" webp></image>
					<view class="d-flex f-column m-left20">
						<text class="color_11 size36 bold600 m-top4">{{pageData.uname}}</text>
						<text class="color_99 size26 m-top16">{{pageData.addTime}}</text>
					</view>
				</view>
				<!-- 	<view class="edit d-flex a-center" @click="showEdit = true" v-if="pageData.ftvid == vid">
					<view class="iconfont icon-bianji size26"></view>
					<text class="h6 m-left10">编辑</text>
				</view> -->
			</view>
		</view>




		<view class="content">
			<text class="file_content" user-select selectable>{{pageData.file_content}}</text>
			<view class="d-flex f-wrap m-top10" v-if="pageData.label">
				<block v-for="(labelItem,labelIndex) in pageData.label" :key="labelIndex">
				<text class="color size26 m-right16 m-bot12">#{{labelItem}}</text>
				</block>
			</view>
			<view class="row  m-top20">
				<view class="flex-1 d-flex">
					<view class="d-flex" v-if="pageData.address" @click="$openLocation(pageData)">
						<view class="iconfont icon-dingweixiao color_99 size28 m-top4"></view>
						<text class="color_99 size26 m-left10">{{pageData.address}}</text>
					</view>
				</view>
				<view class="d-flex a-center" v-if="pageData.watch">
					<view class="iconfont icon-browse color_99 size30"></view>
					<text class="color_99 h6 m-left6">{{pageData.watch}}</text>
				</view>
			</view>
		</view>




		<Dcomment  :infoData="pageData" :file_id="file_id" @getDetails="details"></Dcomment>

		


		<u-popup :show="showEdit" @close="showEdit = false" :round="15" :duration="200">
			<view class="popup_list black">编辑</view>
			<view class="popup_list color_ff2" @click="delBtn">删除</view>
			<view class="popCent"></view>
			<view class="cancel" @click="showEdit = false">取消</view>
		</u-popup>
		
		
		
		
		<view class="back" :style="{'top':statusBarHeight+((navBarHeight - 30) / 2)+'px'}" @click="topIcon">
			<view class="iconfont black bold600" :class="fromShare == 1?'icon-shouye-fanhuishouye size40':'icon-back size36'"></view>
		</view>
		
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import Dcomment from '@/otherPage/components/Dcomment.vue'
	export default {
		components:{
			Dcomment
		},
		data() {
			return {
				imgUrl: this.imgUrl,
				fromShare:0,
				loading:true,
				statusBarHeight:getApp().globalData.statusBarHeight, 
				navBarHeight:getApp().globalData.navBarHeight, 
				current:0,
				navBar:false,
				
				file_id: '',
				pageData: '',
				
				showEdit: false,
				commont:'',
				
			}
		},
		onLoad(option) {
			if (option.file_id) this.file_id = option.file_id;
			if (option.fromShare) this.fromShare = option.fromShare;
			this.details();
			setTimeout(()=>{
				if(!this.pageData) return this.$showLoading('加载中~');
			},300)
		},
		
		methods: {
			details() {
				let that = this;
				this.$http.post({
					url: '/communityApi/details',
					data: {
						file_id: this.file_id
					}
				}).then(res => {
					this.$hideLoading();
					if (res.code != '100') return this.$Toast(res.msg);
					if(this.pageData){
						this.pageData.reply = res.data.reply;
						return;
					}
					this.pageData = res.data;
				})
			},

			delBtn() {
				this.showEdit = false;
				this.$Modal('提示', '确定要删除吗？').then(res => {
					if (res) {
						console.log(1);
					}
				})
			},

			swiperCurrent(e){
				this.current = e.detail.current;
			},

			
			topIcon(){
				this.fromShare==1?this.$pageHome():this.$back();
			}
		},
		
		
		watch:{
			pageData(newVal){
				if(newVal) this.$hideLoading();
				setTimeout(()=>{
					this.$hideLoading()
				},200)
			}
		},
		computed: {
			...mapState(['color', 'System', 'vid']),
		},
		
		onPageScroll(e) {
			let scroll = e.scrollTop;
			scroll >= 100?this.navBar = true:this.navBar = false;
		},
		
		onShareAppMessage(res) {
			let that = this;
			let share = this.pageData;
			return {
				title: share.file_content,
				desc: share.file_content,
				path: `/pages/startUp/startUp?share_v_id=${this.vid}&artId=${share.file_id}&pageType=1`,
				imageUrl: that.imgUrl+share.fileImgArr[0]
			}
		}
	}
</script>
<style>
	page {
		background-color: #f8f8f8;
	}
</style>
<style lang="scss" scoped>
	
	.isImgArr{
		margin-top:-24rpx;
	}
	.user {
		background-color: #ffffff;
		padding: 40rpx 30rpx;
		border-radius:30rpx;
		overflow: hidden;
	}

	.userHead {
		width: 110rpx;
		height: 110rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.swiper {
		width: 750rpx;
		height: 750*1.33rpx;
		background-color: #f7f7f7;
		position: relative;
	}
	.dots{
		position: absolute;
		left:0;
		bottom: 40rpx;
		z-index:666;
	}
	.dot{
		width:8rpx;
		height: 8rpx;
		border-radius: 50%;
		background-color: #ffffff;
		margin:0 6rpx;
	}
	.dotactive{
		width:30rpx !important;
		border-radius: 4rpx !important;
		background-color: var(--color) !important;
	}
	.swItem {
		width: 100%;
		height: 100%;
		position: relative;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		box-sizing: border-box;
		z-index:1;
	}

	.swItem::after {
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		backdrop-filter: blur(30px);
		z-index:1;
	}

	.swiper swiper-item {
		width: 100%;
		height: 100%;
	}

	.swiper swiper-items {
		width: 100%;
	}
	.imga {
		width:100%;
		height: 100%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 10;
	}

	.content {
		width: 100%;
		background-color: #ffffff;
		margin-top: 20rpx;
		border-radius: 30rpx;
		padding: 30rpx;
		
	}
	.file_content{
		font-size: 32rpx;
		line-height: 50rpx;
		color: #000000;
	}
	
	

	.zanImg {
		width: 32rpx;
		height: 32rpx;
	}

	


	.edit {
		padding: 12rpx 18rpx;
		border-radius: 10rpx;
		color: #ffffff;
		background-color: var(--color);
	}
	.back{
		width:60rpx;
		height: 60rpx;
		background-color: rgba(255, 255, 255, 0.5);
		border-radius: 50%;
		position: fixed;
		left:20rpx;
		z-index:888;
		text-align: center;
		line-height: 60rpx;
	}
	
</style>
